<!--
  ~ Copyright 2022 Red Hat, Inc. and/or its affiliates.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Timeouts showcase extended</title>
    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<div class="container-fluid">
    <div class="sticky-top d-flex justify-content-center align-items-center" aria-live="polite" aria-atomic="true">
        <div id="notificationPanel" style="position: absolute; top: .5rem;"></div>
    </div>
    <h3>Timeouts showcase</h3>

    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="switch-state-timeouts-tab" data-bs-toggle="tab" data-bs-target="#switch-state-timeouts-container" type="button" role="tab" aria-controls="switch-state-timeouts-container" aria-selected="true">switch-state-timeouts</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="callback-state-timeouts-tab" data-bs-toggle="tab" data-bs-target="#callback-state-timeouts-container" type="button" role="tab" aria-controls="callback-state-timeouts-container" aria-selected="false">callback-state-timeouts</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="event-sate-timeouts-tab" data-bs-toggle="tab" data-bs-target="#event-state-timeouts-container" type="button" role="tab" aria-controls="event-state-timeouts-container" aria-selected="false">event-state-timeouts</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="workflow-timeouts-tab" data-bs-toggle="tab" data-bs-target="#workflow-timeouts-container" type="button" role="tab" aria-controls="workflow-timeouts-container" aria-selected="false">workflow-timeouts</button>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="switch-state-timeouts-container" role="tabpanel" aria-labelledby="switch-state-timeouts-tab">
            <div style="padding-top: 20px;">
                <div style="margin-bottom: .5rem">
                    <button id="refreshSwitchStateTimeoutsButton" type="button" class="btn btn-secondary btn-sm">Refresh</button>
                    <button id="startSwitchStateTimeoutsButton" type="button" class="btn btn-primary btn-sm">Start new switch-state-timeouts</button>
                </div>

                <table class="table table-bordered table-striped table-sm" id="switchStateTimeoutsTable">
                    <!-- Filled in by app.js -->
                </table>
            </div>
        </div>
        <div class="tab-pane fade" id="callback-state-timeouts-container" role="tabpanel" aria-labelledby="callback-state-timeouts-tab">
            <div style="padding-top: 20px;">
                <div style="margin-bottom: .5rem">
                    <button id="refreshCallbackStateTimeoutsButton" type="button" class="btn btn-secondary btn-sm">Refresh</button>
                    <button id="startCallbackStateTimeoutsButton" type="button" class="btn btn-primary btn-sm">Start new callback-state-timeouts</button>
                </div>

                <table class="table table-bordered table-striped table-sm" id="callbackStateTimeoutsTable">
                    <!-- Filled in by app.js -->
                </table>
            </div>
        </div>
        <div class="tab-pane fade" id="event-state-timeouts-container" role="tabpanel" aria-labelledby="event-state-timeouts-tab">
            <div style="padding-top: 20px;">
                <div style="margin-bottom: .5rem">
                    <button id="refreshEventStateTimeoutsButton" type="button" class="btn btn-secondary btn-sm">Refresh</button>
                    <button id="startEventStateTimeoutsButton" type="button" class="btn btn-primary btn-sm">Start new event-state-timeouts</button>
                </div>

                <table class="table table-bordered table-striped table-sm" id="eventStateTimeoutsTable">
                    <!-- Filled in by app.js -->
                </table>
            </div>
        </div>
        <div class="tab-pane fade" id="workflow-timeouts-container" role="tabpanel" aria-labelledby="workflow-timeouts-tab">
            <div style="padding-top: 20px;">
                <div style="margin-bottom: .5rem">
                    <button id="refreshWorkflowTimeoutsButton" type="button" class="btn btn-secondary btn-sm">Refresh</button>
                    <button id="startWorkflowTimeoutsButton" type="button" class="btn btn-primary btn-sm">Start new workflow-timeouts</button>
                </div>

                <table class="table table-bordered table-striped table-sm" id="workflowTimeoutsTable">
                    <!-- Filled in by app.js -->
                </table>
            </div>
        </div>
    </div>
</div>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="eventsToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">Event was sent</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Give some time for the event to be processed and use the Refresh button to see the changes.
        </div>
    </div>
</div>

<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
<script src="/app.js"></script>

</body>
</html>
